<template>
    <div class="personal_container">
        <div class="state">
            <div class="state_top">
                <span class="state_icon el-icon-arrow-left" @click="back"></span>
                <div class="state_head">
                    <img src="../../assets/images/1.gif" alt="">
                </div>
                <div class="state_top_con">
                    <p class="userName">卑鄙的我</p>
                    <p class="like">
                        <span class="attention">关注12</span>
                        <span class="fans">粉丝25</span>
                    </p>
                    <div class="information">
                        <p><span class="el-icon-edit"></span>我的资料</p>
                    </div>
                </div>
            </div>
            
            <el-tabs v-model="activeName">
                <!--动态 start-->
                <el-tab-pane label="动态" name="first">
                    <div class="tab_state">
                        <div class="all_state">全部动态(456)</div>
                        <div class="tab_state_con">
                            <div class="user">卑鄙的我</div>
                            <div class="date">
                                <span class="data_left">2-22</span>
                                <span class="data_right el-icon-star-on">545</span>
                            </div>
                            <div class="discuss">
                                <div class="title">评论话题</div>
                                <div class="content">
                                    <p class="topic">保时捷保时捷保时捷保时捷保时捷保时捷保时捷保时捷保时捷</p>
                                    <div class="content_details">
                                        <div class="content_details_img">
                                            <img src="../../assets/images/2.gif" alt="">
                                        </div>
                                        <div class="content_details_con">
                                            <p class="title">2017年上海国际车展</p>
                                            <p class="content">2017年上海国际车展2017年上海国际车展2017年上海国际车展</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <!--动态 end-->
                <!--相册 start-->
                <el-tab-pane label="相册" name="second">
                    <div class="photo">
                        <div class="all_state">04月</div>
                        <div class="photo_list">
                            <ul>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="photo">
                        <div class="all_state">03月</div>
                        <div class="photo_list">
                            <ul>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                            </ul>
                        </div>
                        <div class="photo_list">
                            <ul>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                                <li>
                                    <img src="../../assets/images/3.gif" alt="">
                                </li>
                            </ul>
                        </div>
                    </div>
                </el-tab-pane>
                <!--相册 end-->
                <!--关注 start-->
                <el-tab-pane label="关注" name="third">
                    <div class="attention">
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/14.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>水果味的小仙女</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@茄子味的小男神 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/14.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>水果味的小仙女</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@茄子味的小男神 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/14.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>水果味的小仙女</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@茄子味的小男神 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/14.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>水果味的小仙女</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@茄子味的小男神 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/14.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>水果味的小仙女</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@茄子味的小男神 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-tab-pane>
                <!--关注 end-->
                <!--粉丝 start-->
                <el-tab-pane label="粉丝" name="fourth">
                    <div class="attention">
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/15.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>茄子味的小男神</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@水果味的小仙女 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/15.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>茄子味的小男神</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@水果味的小仙女 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/15.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>茄子味的小男神</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@水果味的小仙女 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/15.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>茄子味的小男神</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@水果味的小仙女 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="attention_list">
                            <el-row :gutter="20">
                                <el-col :span="4">
                                    <div class="pic">
                                        <img src="../../assets/images/15.gif" alt="">
                                    </div>
                                </el-col>
                                <el-col :span="16">
                                    <div class="content">
                                        <h2>茄子味的小男神</h2>
                                        <p>春风十里，不如一场直播，我在一直播等你</p>
                                        <p>@水果味的小仙女 等27人关注了她</p>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="add_attention">
                                        <p class="el-icon-star-on"></p>
                                        <p>加关注</p>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-tab-pane>
                <!--粉丝 end-->
            </el-tabs>
           
        </div>
    </div>
</template>
<script>
    export default {
        name:'personastte',
        data(){
            return{
                activeName: 'first'
            }
        },
        methods:{
            back(){
                this.$router.go(-1);
            }
        }
    }
</script>
<style lang="less" scoped>
    @height:35rem;
    .state_top{
        margin-top:15/35rem;
        text-align:center;
        position:relative;
        .state_icon{
            position:absolute;
            left:10/35rem;
            font-weight:bold;
        }
        .state_head img{
            width:100/35rem;
            height:100/35rem;
            border-radius:50%;
            background:skyblue;
        
        }
        .state_top_con{
            .userName{
                font-size:16/35rem;
                font-weight:600;
            }
            .like{
                width:150/35rem;
                height:20/35rem;
                line-height:20/35rem;
                margin:10/35rem auto;
                overflow:hidden;
                .attention{
                    float:left;
                }
                .fans{
                    float:right;
                }
            }
            .information{
                width:100/35rem;
                height:25/35rem;
                line-height:25/35rem;
                border:1px solid white;
                margin:0 auto;
                background:#ebeae8;
                border-radius:10/35rem;
                p{
                    margin:0;
                }
            }
            p{
                margin-top:10/35rem;
             }
            
        }
    }
    .tab_nav{
        margin-top:20/@height;
    }
    //动态
    .all_state{
        font-size:12/@height;
        height:20/@height;
        line-height:20/@height;
        background:#c8c8c8;
        padding:0 10/@height;
    }
    .tab_state_con{
        padding:0 10/@height;
        .user{
            margin-top:15/@height;
        }
        .date{
            margin:10/@height 0;
            width:100%;
            overflow:hidden;
            .data_left{
                float:left;
            }
            .data_right{
                float:right;
            }
        }
        .discuss{
            .title{
                margin-bottom:10/@height;
            }
            .content{
                .topic{
                    margin-bottom:10/@height;
                    overflow:hidden;
                    white-space:nowrap;
                    text-overflow:ellipsis;
                }
                .content_details{
                    overflow:hidden;
                    background:#c8c8c8;
                    .content_details_img{
                        margin:10/@height 0 0 10/@height;
                        float:left;
                        width:80/@height;
                        height:80/@height;
                    }
                    .content_details_con{
                        float:left;
                        width:230/@height;
                        margin-top:20/@height;
                        padding-right:10/@height;
                        // overflow:hidden;
                        // white-space:nowrap;
                        // text-overflow:ellipsis;
                    }
                }
                
            }
            
        }
    }
    //相册
    .photo{
        background:#f0f0f0;
        .all_state{
            background:#f0f0f0;
        }
    }
    .photo_list{
        margin-bottom:10/@height;
        overflow:hidden;
        li{
            float:left;
            img{
                width:100/@height;
                heigth:100/@height;
            }
        }
        li:nth-of-type(2){
            margin:0 25/@height;
        }
    }
    //关注
    .attention_list{
        margin-top:20/@height;
        padding:0 10/@height;
        .pic{
            img{
                width:50/@height;
                height:50/@height;
                border-radius:50%;
            }
        }
        .content{
            line-height:18/@height;
            p{
                color:#ccc;
                overflow:hidden;
                white-space:nowrap;
                text-overflow:ellipsis;
            }
        }
        .add_attention{
            color:#ccc;
            margin-top:10/@height;
            text-align:center;
            line-height:20/@height;
        }
    }
</style>